---
import BaseLayout from "../layouts/Layout.astro";
import { getCollection } from "astro:content";
import { byDateDesc, processPost } from "../lib/postUtils";
import PostGrid from "../components/PostGrid.astro";

const rawWebDevPosts = await getCollection("web");
const posts = rawWebDevPosts.map(processPost).sort(byDateDesc);
---

<BaseLayout title="Web Dev Guides" class="p-4 md:p-6">
    <div class="border-3 border-black p-6 mb-4 md:mb-8 bg-cyan shadow-neo">
        <h2 class="text-2xl md:text-4xl font-black uppercase mb-2">
            WEB DEV & PROJECTS
        </h2>
        <p class="text-base md:text-xl">
            Frontend development, personal projects, and web technology guides.
        </p>
    </div>
    <PostGrid
        posts={posts}
        accentColor="#AEEEEE"
        borderColor="#222"
        cornerColor="#1976d2"
        postNumberColor="#ff6b6b"
    />
</BaseLayout>
